<template>
  <div class="box">
    <el-dialog
      :title="this.$t('h.importDatxWallet')"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="close">
      <div class="form">
        <el-form :model="validate" ref="dynamicValidateForm" label-width="0" class="demo-dynamic">
          <el-form-item
            prop="private"
            :label="this.$t('h.importKey')"
            :rules="[
                    { required: true, message: '请输入私匙', trigger: ['blur', 'change']  }
                    ]">
            <el-input v-model="validate.private" type="textarea" :placeholder="this.$t('h.importKeyPlaceholder')"></el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :label="this.$t('h.password')"
            :rules="[
                    { required: true, message: '请输入密码', trigger: ['blur', 'change']  }
                    ]">
            <el-input v-model="validate.password" :placeholder="this.$t('h.passwordPlaceholder')" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="button" @click="submitForm()">{{$t("h.beginImport")}}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {importAccount, getPubKeyByWif, isValidPrivate} from '../service/datxService'
  import {VerifyPassword} from '../utils/commonUtils'
  import {getAccountByPublicKey} from '../api/chainApi'

  export default {
    data() {
      return {
        dialogVisible: true,
        validate: {
          private: '',
          password: ''
        }
      }
    },
    methods: {
      close() {
        this.$emit('showHand', false)
      },
      submitForm() {
        let bol1 = isValidPrivate(this.validate.private);
        let bol2 = VerifyPassword(this.validate.password);
        if (bol1 && bol2) {
          let pubKey = getPubKeyByWif(this.validate.private);
          getAccountByPublicKey(pubKey).then(resp => {
            if (resp.data) {
              let res = importAccount(this.validate.private, this.validate.password, resp.data.account_names[0], 'created')
              if (res) {
                this.$message.error(res);
              } else {
                this.$emit('showHand', false, true);
              }
            } else {
              this.$message.error('该账户未设置用户名');
            }
          });
        } else {
          this.$message.error('请输入正确的私钥或密码');
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .form {
    padding: 0 20px;
  }

  .box .button {
    border-radius: 4px;
    border: none;
    background-color: #98889b;
    width: 100%;
    height: 41px;
    font-size: 14px;
    color: #fff;
  }
</style>
<style lang="less" >
  .box{
    .el-dialog__wrapper{
      .el-dialog{
        border-radius: 8px;
      }
      .el-dialog__header{
        border-bottom:1px solid #eaedf5;
        color:#000000;
        font-size: 18px;
        font-weight: bold;
        padding:20px;
      }
      .el-dialog__body{
        padding:30px 0;
      }
      .el-dialog__headerbtn .el-dialog__close{
        color: #666666;

      }
    }
  }
</style>z



